<template>
	<view>
		<uni-button class="add-labels-btn" type="primary" @click="openPopup">打开</uni-button>
		<view class="add-label-popup-tag-container">
			<uni-tag class="add-label-tag" v-for="(item,index) in content.split('，')" :key="index" :text="item"
		:type="'primary'"></uni-tag>
		</view>
		<uni-popup ref="popup" type="center" @maskClick="maskClose()">
			<view class="add-label-popup-container">
				<view>
					<uni-easyinput type="text" v-model="content" placeholder="请输入标签内容" @change="inputLabels" />
				</view>
				<p style="color: #999;margin: 10px 0;">点击标签选中或直接输入</p>
				<view class="add-label-popup-tag-container" v-if="labelsList.length">
					<uni-tag class="add-label-tag" v-for="item in labelsList" :key="item._id" :text="`${item.value}(${item.count})`"
					:type="selectedLabels.includes(item._id)?'primary':''" @click="choose(item)"></uni-tag>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	export default {
		name: 'addLabel',
		props:{
			initValue:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				content:'',
				modalShow: false,
				labelsList: [],
				selectedLabels: [],
				userInfo: {},
			}
		},
		methods: {
			init(){
				const that = this
				this.selectedLabels = []
				if(that.initValue){
					that.content = that.initValue.join('，')
					that.$emit('setLabel',that.content.split('，'))
				}
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						that.userInfo = res.data
						that.getLabelsList()
					}
				});
			},
			openPopup() {
				this.$refs.popup.open('center')
			},
			getLabelsList() {
				const that = this
				callCloudFunction('getLabels', {
					owner: that.userInfo._id
				}, res => {
					res.result.data.sort((a,b)=>{
						a.count = a.count || 0
						b.count = b.count || 0
						return b.count - a.count
					})
					that.labelsList = res.result.data
					that.initValue?.forEach(labelName=>{
						const item = that.labelsList.find(item=>item.value == labelName)
						that.selectedLabels.push(item._id)
					})
				}, err => {
					uni.showModal({
						content: `查询用户标签失败`,
						showCancel: false
					})
				})
			},
			choose(target){
				const index = this.selectedLabels.findIndex(item=>item == target._id)
				if(index == -1){
					this.selectedLabels.push(target._id)
				}else{
					this.selectedLabels.splice(index,1)
				}
				this.content = this.selectedLabels.map(item=>{
					return this.labelsList.find(ele=>{
						return ele._id == item
					}).value
				}).join('，')
			},
			inputLabels(){
				const that = this
				that.selectedLabels = []
				const list = that.content.split("，")
				list.forEach(labelValue=>{
					const item = that.labelsList.find(item=>{
						return item.value == labelValue
					})
					if(item){
						that.selectedLabels.push(item._id)
					}
				})
			},
			maskClose(){
				this.$emit('setLabel',this.content.split('，'))
			}
		},
		watch:{
			initValue(newVal,oldVal){
				this.content = newVal.join('，')
				this.$emit('setLabel',this.content.split('，'))
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style>
	.add-labels-btn {
		width: 60px;
		height: 30px;
		font-size: 12px;
		margin-left: 0;
		margin-top: 4px;
	}

	.add-label-popup-container {
		width: 80vw;
		padding: 20px 20px;
		min-height: 50vh;
		background-color: white;
	}
	
	.add-label-popup-tag-container{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.add-label-tag {
		margin-right: 5px;
		margin-bottom: 5rpx;
		height: fit-content;
	}
</style>
